<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="include.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>fotoDB</title>
</head>
<body>
	<div id="content" align="center">
		<input type="button" onclick="changeUploadType(this)" style="background:url(images/multiupload.jpg);background-position:center;background-repeat:no-repeat;width:110px;height:110px;position:absolute;right:250px;top:35px;" title="to Multiupload" alt="to Multiupload"/>
		<div id="singleUploadDiv" style="display:inline">
			<form action="<%=dbmode%>UpdateApp?action=uploadImage&type=single" method="post" enctype="multipart/form-data" name="updateForm">
				<div class="upload_title1" align="center">1. Bildinformationen eingeben</div>
				<div class="table">
					<div class="table_cell" style="width:15%;">Datei:</div>
					<div class="table_cell" style="width:70%">
						<input type="file" style="float:left;width:150px;" name="imgPath">
					</div>
					
					<div class="table_cell" style="width:15%;">Name:</div>
					<div class="table_cell" style="width:70%">
						<input type="text" style="float:left;width:150px;" name="imgName">
					</div>
					
					<div class="table_cell" style="width:15%;">Bewertung:</div>
					<div class="table_cell" style="width:70%">
						<ul class="star-rating">
						<li class="current-rating" id="current-rating"></li>
							<li><a title="1 star out of 5" class="one-star" onClick="setRate(1);">1</a></li>
							<li><a title="2 stars out of 5" class="two-stars" onClick="setRate(2);">2</a></li>
							<li><a title="3 stars out of 5" class="three-stars" onClick="setRate(3);">3</a></li>
							<li><a title="4 stars out of 5" class="four-stars" onClick="setRate(4);">4</a></li>
							<li><a title="5 stars out of 5" class="five-stars" onClick="setRate(5);">5</a></li>
						</ul>
					</div>
				</div>
				
				<div class="table" style="height:300px;">
				<div class="upload_combi" >
				<div class="upload_title2" >2. Kategorien auswählen</div>
				
				
				<div class="table" style="width:100%;">
					<c:forEach var="categorie" items="${categories}">
					<div class="table_cell" style="width:40%">
						<input type="checkbox" name="categorie" value="${categorie.nr}" />${categorie.name}
					</div>
					</c:forEach>
				</div>
				</div>
				
				<div class="upload_combi" style="float:right;">
				
				<div class="upload_title3">3. Schlagworte auswählen</div>
				
				<div class="table" style="height:150px;width:100%;">
					
					<div class="table_cell" style="width:30%;">Schlagwortliste:</div>
					<div class="table_cell" style="width:50%;margin-top:3px;">
						<select style="width:100%;" name="keywordInput" id="keywordInput" 
								onchange="addKeyword(this.form.keywordInput);">
							<option value="0">Bitte wählen ...</option>
							<c:forEach var="keyword" items="${keywords}">
		    					<option value="${keyword.nr}">${keyword.word}</option>
		    				</c:forEach>
						</select>
					</div>
					<div class="table_cell" style="width:30%;">
						<input type="button" name="delete" value="löschen" style="float:right;"
								onclick="deleteKeyword(this.form.keywordSelected)">
					</div>
					<div class="table_cell" style="width:50%;">
						<select size="6" style="width:100%;" name="keywordSelected" id="keywordSelected">
						</select>
					</div>
					
				
				</div>
				</div>
				</div>
				<div class="table" style="height:50px;">
				<div class="buttons" style="text-align:center; ">
				
		    		<button  class="negative" name="cancel" type="button" onClick="updateCancel();" style="float:right;">
		        		<img src="images/cancel_button.png" alt=""/> 
						Abbrechen
					</button>
					<button class="positive" name="submit" value="submit" onClick="updateSubmit();" style="float:right;">
		        		<img src="images/ok.png" alt=""/> 
		        		Speichern
		    		</button>
				</div>
				</div>
				<input   type= "hidden"   name= "keywords">
				<input   type= "hidden"   name= "imgRate">
			</form>
		</div>
		<div id="multiUploadDiv" style="display:none">
			<form id="multiUploadForm" name="multiUploadForm" action="<%=dbmode%>UpdateApp?action=uploadImage&type=multi" method="post" enctype="multipart/form-data" target="statisticFrame">
			<div class="upload_title1" align="center">Choose photos to upload</div>
			<div class="table" style="height:50px;margin:auto;margin-top:20px;">
				<div class="table_cell" style="width:15%;">Datei:</div>
				<div class="table_cell" style="width:70%">
					<input type="file" id="multiUpload" name="multiUpload" multiple="multiple" onclick="refreshUploadingPage()" />
				</div>
			</div>
			<div style="position:absolute;left:380px" >
				<input type="button" name="submit_button" value="Submit" onclick="submitMultiUpload();" style="background:url(images/ok.png) no-repeat;width:100px;height:30px" />
	    	</div>
			</form>
			<iframe id="statisticFrame" align="middle" name="statisticFrame" src="loading.jsp" style="display:none;width:1024px;height:600px;margin:0px;padding:0px" frameborder="0"></iframe>
			
		</div>
	</div>
	
<script language="javascript">
	function setRate(ratingIn) {
		document.updateForm.imgRate.value=ratingIn;
		
		var current = document.getElementById("current-rating");
		var tmp = ratingIn * 30;
		current.style.width=tmp+"px";
	}
	
	function addKeyword(keywordInput) {
		var index = keywordInput.selectedIndex;
		if(index > 0) {
			var value			= keywordInput.options[index].value;
			var text			= keywordInput.options[index].text;
			var keywords	 	= document.getElementById("keywordSelected");
			var keyword 		= document.createElement("option");
		
			keyword.text = text;
			keyword.value = value;
			keywords.add(keyword);
			
			keywordInput.options.remove(index);
		}
	}
	
	function deleteKeyword(keywordSelected) {
		var index 			= keywordSelected.selectedIndex;
		if(index >=0) {
			var value			= keywordSelected.options[index].value;
			var text			= keywordSelected.options[index].text;
			var keywords	 	= document.getElementById("keywordInput");
			var keyword 		= document.createElement("option");
	
			keyword.text = text;
			keyword.value = value;
			keywords.add(keyword);
		
			keywordSelected.options.remove(index);
		}
	}
	
	function updateSubmit() {
		document.updateForm.keywords.value = "";
		
		for(var i=0;i<document.updateForm.keywordSelected.length;i++){ 
			document.updateForm.keywords.value += document.updateForm.keywordSelected.options[i].value; 
			if(i!=(document.updateForm.keywordSelected.length-1)){ 
			document.updateForm.keywords.value += ',';
			}
		}
		
		
		this.form.submit();
	}
	
	function updateCancel() {
		location = "index.jsp";
	}
	
	function insertKeyword() {
		location = "uploadKeyword.jsp";
	}
	
	function changeUploadType(button){
		var single=document.getElementById('singleUploadDiv');
		var multi=document.getElementById('multiUploadDiv');
		if (single.style.display=='inline'){
			single.style.display='none';
			multi.style.display='inline';
			button.style.background='url(images/singleupload.jpg)';
			button.style.backgroundRepeat='no-repeat';
			button.style.backgroundPosition='center';
			button.title='to SingleUpload';
			
		}else{
			single.style.display='inline';
			multi.style.display='none';
			button.style.background='url(images/multiupload.jpg)';
			button.style.backgroundRepeat='no-repeat';
			button.style.backgroundPosition='center';
			button.title='to MultiUpload';
		}
	}
	
	function submitMultiUpload(){
		var form=document.getElementById('multiUploadForm');
		form.submit();
		var statisticFrame=document.getElementById('statisticFrame');
		statisticFrame.style.display='block';
		
	}
	
	function refreshUploadingPage(){
		var statisticFrame=document.getElementById('statisticFrame');
		statisticFrame.src='loading.jsp';
		statisticFrame.style.display='none';
	}
</script>
</body>
</html>